import React, { Component } from "react";
//引入react-router-dom包
import { NavLink, Switch, Redirect, Route } from "react-router-dom";
//引入组件
import DetList from "../DetList/DetList";
//引入react-redux包
import { connect } from "react-redux";
class Detail extends Component {
    render() {
        let list = this.props.location.state;
        let totalPrice = 0;
        this.props.cartList.forEach((item, index) => {
            totalPrice += item.price * item.count;
        });
        return (
            <div className="detail">
                <div className="nav">
                    {list.map((item, index) => {
                        return (
                            <NavLink
                                to={{
                                    pathname: `/detail/${index}`,
                                    state: this.props.location.state
                                }}
                                className="item"
                                key={item.id}
                            >
                                {item.navTitle}
                            </NavLink>
                        );
                    })}
                </div>
                <Switch>
                    <Route path="/detail/:index" component={DetList}></Route>
                    {list.length > 0 && (
                        <Redirect
                            to={{
                                pathname: "/detail/0",
                                state: this.props.location.state
                            }}
                        ></Redirect>
                    )}
                </Switch>
                <div
                    className="toCart"
                    onClick={() => {
                        this.props.history.push("/cart");
                    }}
                >
                    <span>合计：￥{totalPrice}元</span>
                </div>
            </div>
        );
    }
}
export default connect(
    state => {
        return {
            cartList: state.cartList
        };
    },
    dispatch => {
        return {};
    }
)(Detail);
